<template>
  <div class="orderinglist">
    <div>
      审核状态：
    </div>
    <div id="part_one">
      <div>
        <div>
          <el-radio v-model="radio" label="1">全部</el-radio>
        </div>
        <div>
          <el-radio v-model="radio" label="2">已通过</el-radio>
        </div>
        <div>
          <el-radio v-model="radio" label="3">未通过</el-radio>
        </div>
        <div>
          <el-radio v-model="radio" label="4">未审核</el-radio>
        </div>
      </div>
      <div>
        <el-row>
          <el-button>导出到Excel</el-button>
        </el-row>
      </div>
    </div>
    <div id="part_two">
      <el-table :data="tableData"
                border
                style="width: 100%">
        <el-table-column fixed
                         prop="date"
                         label="订单编号">
        </el-table-column>
        <el-table-column prop="name"
                         label="订单数量">
        </el-table-column>
        <el-table-column prop="province"
                         label="大客户专员姓名">
        </el-table-column>
        <el-table-column prop="city"
                         label="单位名称">
        </el-table-column>
        <el-table-column prop="address"
                         label="创建时间">
        </el-table-column>
        <el-table-column prop="zip"
                         label="单价">
        </el-table-column>
        <el-table-column prop="zip"
                         label="支付金额">
        </el-table-column>
        <el-table-column prop="zip"
                         label="审核状态">
        </el-table-column>
        <el-table-column fixed="right"
                         label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="part_three">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage4"
                     :page-sizes="[100, 200, 300, 400]"
                     :page-size="100"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="400">
      </el-pagination>
    </div>
  </div>
</template>
<style scoped>
  .orderinglist{
    margin:0 50px;
  }
  #part_one {
    display:flex;
    align-items:center;
  }
  #part_one>div {
  margin:0 50px;
  }
  #part_two{
    margin-top:20px;
  }
  #part_three {
    display: flex;
    justify-content: flex-end;
  }
</style>
<script>
  export default {
     methods: {
      handleClick(row) {
        console.log(row);
      }
    },
    data () {
      return {
        radio: '1',
         tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }]
      };
    }
  }
</script>
